<template>
  <a-layout>
    <a-layout-sider width="270" style="background-color: #141414; user-select: none">
      <a-button type="primary" @click="$router.push('/')">回到首页</a-button>
      <a-menu
        v-model:selectedKeys="selectedKeys2"
        v-model:openKeys="openKeys"
        mode="inline"
        :items="store.treeToTranslate"
        :style="{ maxHeight: '100vh', overflowY: 'auto', borderRight: 0 }"
        @click="gotoPage"
      >
      </a-menu>
    </a-layout-sider>
    <a-layout style="padding: 0 24px 24px">
      <GlobalHeader />
      <a-layout-content class="m-0 min-h-70">
        <div
          class="w-full h-full p-6 dark:bg-[#141414] dark:text-light-200 bg-warm-gray-50 text-gray-900 transition-colors duration-1000"
        >
          <slot></slot>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup name="generator-layout">
import { useGlobalStore } from '@/store'
import GlobalHeader from '@/components/GlobalHeader/index.vue'
import { MenuClickEventHandler } from 'ant-design-vue/es/menu/src/interface'

const store = useGlobalStore()
const selectedKeys2 = ref<string[]>(['1'])
const openKeys = ref<string[]>(['sub1'])

const router = useRouter()

const gotoPage: MenuClickEventHandler = ({ item, key }) => {
  router.push({
    path: `/startup/${key}`,
    query: { ...((item?.originItemValue as ClickableMenuItem) ?? {}) }
  })
}
</script>
<style scoped>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>
